html,
body,
#root,
.ant-app {
  height: 100%;
  will-change: transform;
  background-color: var(--el-color-colorBgContainer);
}

.main-maximize {
  .ant-tabs,
  .ant-layout-sider,
  .ant-layout-header,
  .ant-layout-footer,
  .sider-split {
    display: none !important;
  }
}

.mask-image {
  padding-right: 50px;
  mask-image: linear-gradient(90deg, #000000 0%, #000000 calc(100% - 50px), transparent);
}

/*
keepalive-for-react animation example
transition 应设置为 true 以启用动画 和 duration 应设置为动画持续时间
*/

.cache-component.active {
  animation: fadeIn 0.3s ease-in-out;
}

@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateX(-40px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}

::-webkit-scrollbar-thumb {
  background-color: var(--el-color-scrollbarThumb);
  border-radius: 20px;
}

::-webkit-scrollbar-corner {
  background-color: transparent;
}
